<template>
    <div id="app">
        <vue-particles
            id="tsparticles"
            :particlesInit="particlesInit"
            :particlesLoaded="particlesLoaded"
            :options=options
        />

        <div class="formContainer">
            <h3>网站管理系统</h3>
            <el-form
  :model="loginForm"
  status-icon
  :rules="loginRules"
  ref="loginFormRef"
  label-width="80px"
  class="loginform"
>

<el-form-item label="用户名" prop="username">
    <el-input
      v-model="loginForm.username"
      autocomplete="off"
    ></el-input>
  </el-form-item>
  <el-form-item label="密码" prop="password">
    <el-input
      type="password"
      v-model="loginForm.password"
      autocomplete="off"
    ></el-input>
  </el-form-item>
  <el-form-item>
    <el-button type="primary" @click="submitForm()">登录</el-button>   
  </el-form-item>
</el-form>
        </div>
    </div>
</template>

<script setup>

// 导入粒子库loadFull或loadSlim方法
    //import { loadFull } from "tsparticles"; // if you are going to use `loadFull`, install the "tsparticles" package too.
    import { loadSlim } from "tsparticles-slim"; // if you are going to use `loadSlim`, install the "tsparticles-slim" package too.

// 初始化粒子库
const particlesInit = async engine => {
    //await loadFull(engine);
    await loadSlim(engine);
};

// const particlesLoaded = async container => {
//     console.log("Particles container loaded", container);
// };


import {reactive,ref} from 'vue'
import {useRouter} from 'vue-router'
import axios from 'axios'   
import { ElMessage } from 'element-plus'
// import { Store } from "vuex"
import {useStore} from 'vuex'
const store =useStore()

    const loginForm=reactive({
        username:"",
        password:""
    })    //表单绑定的响应式对象

    const loginFormRef=ref() //表单的引用对象  //这里就是拿到loginFormRef 的dom。 vue3中没有了this，需要使用到ref()

    // 设置校验规则
    const loginRules=reactive({
        username:[
            {
                required:true,message:"请输入用户名",trigger:"blur"
            }
        ],
        password:[
            {
                required:true,message:"请输入密码",trigger:"blur"
            }
        ]
    })

    const router=useRouter()
//提交表单函数
const submitForm=()=>{
//   console.log('click');
  //1。校验表单
  loginFormRef.value.validate((valid)=>{
console.log(valid)
if(valid){
//   console.log(loginForm)
//   localStorage.setItem("token","zhj")
//   axios.get("http://localhost:3000/users").then(result=>{
//     console.log(result.data);  //这样会报跨域错误。采用代理方法解决。写在vue.config.js中
//   })
axios.post("/adminapi/user/login",loginForm).then(result=>{
    console.log(result.data)
    if(result.data.ActionType==="OK"){
    //    console.log(result.data.data);
    store.commit("changeUserInfo",result.data.data)
    store.commit("changeGetterRouter", false)
    router.push("/index")
        // localStorage.setItem("token","zhj")
    }else{
        ElMessage.error('用户名和密码不匹配')
    }
  })

//   router.push("/index")
}
  })
//2。拿到表单内容,提交后台
//3。设置token
// localStorage.setItem("token","zhj")
}


    // 配置particles
    const options={
                    background: {
                        color: {
                            value: '#2d3a4b'
                        }
                    },
                    fpsLimit: 120,
                    interactivity: {
                        events: {
                            onClick: {
                                enable: true,
                                mode: 'push'
                            },
                            onHover: {
                                enable: true,
                                mode: 'repulse'
                            },
                            resize: true
                        },
                        modes: {
                            bubble: {
                                distance: 400,
                                duration: 2,
                                opacity: 0.8,
                                size: 40
                            },
                            push: {
                                quantity: 4
                            },
                            repulse: {
                                distance: 200,
                                duration: 0.4
                            }
                        }
                    },
                    particles: {
                        color: {
                            value: '#ffffff'
                        },
                        links: {
                            color: '#ffffff',   //线条颜色
                            distance: 150,  // 线条长度
                            enable: true,   // 是否有线条
                            opacity: 0.5,  // 线条透明度
                            width: 1   // 线条宽度
                        },
                        collisions: {
                            enable: true
                        },
                        move: {
                            direction: 'none',
                            enable: true,
                            outModes: {
                                default: 'bounce'
                            },
                            random: false,
                            speed: 2,     // 粒子运动速度
                            straight: false
                        },
                        number: {
                            density: {
                                enable: true,
                                area: 800
                            },
                            value: 10     // 粒子数量
                        },
                        opacity: {
                            value: 0.5  // 粒子透明度
                        },
                        shape: {
                            type: 'circle'   // 可用的粒子外观类型有："circle","edge","triangle", "polygon","star"
                        },
                        size: {
                            value: { min: 1, max: 5 },
                        }
                    },
                    detectRetina: true
                }
</script>


<style lang="scss" scoped>
.formContainer{
width: 500px;
height: 300px;
position: fixed;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
background: rgba($color: #000000, $alpha: 0.5);
color: white;
text-align: center;
padding: 20px;

h3{
    font-size: 30px;
}

.loginform{
    margin-top: 20px;
}
}



::v-deep .el-form-item__label{
    color: white;
}
</style>

